
<script lang="ts" setup>
const list = [
  ['国风','粤语'],
  ['欧美','古典'],
  ['日语','摇滚'],
  ['夜晚','怀旧歌曲'],
  ['民谣','二次元'],
  ['电音','百大DJ'],
  ['轻音乐','儿歌'],
  ['治愈','中文DJ'],
  ['海边','车载'],
  ['说唱','微醺'],
  ['平静','Chill放松'],
  ['起床','抖音漫游'],
  ['通勤','R&B'],
  ['学习','助眠'],
  ['伤感EMO','KTV必点'],
  ['沉浸0.8X','话语经典'],
  ['K-pop','影视原音'],
  ['情歌','健身'],
]
const emit = defineEmits(['onClickItem'])
const onClickItem = (item:string)=>{
  emit('onClickItem',item)
}
</script>

<template>
  <div style="padding-left: 5vw;">
    <div class="title">
      音乐电台
    </div>
    <div class="list">
      <div class="cloumn">
        <div class="item" v-for="item in list" :key="item[0]">
          <div class="item-content" @click="onClickItem(item[0])">
            {{ item[0] }}
          </div>
          <div class="item-content bottom" @click="onClickItem(item[1])">
            {{ item[1] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: #fff;
  font-size: 5vw;
  line-height: 12vw;
  height: 12vw;
  background-color: transparent;
}

// .list {
//   position: fixed;
//   left: 5vw;
//   top: 12vw;
//   right: 0;
//   bottom: 0;
//   /* x轴方向滚动 */
//   overflow-x: auto;
//   /* 防止换行 */
//   white-space: nowrap;
//   /* 隐藏滚动条 */
//   scrollbar-width: none;
  
// }
.list {
  /* 固定宽度按 */
  max-width: 95vw;
  /* x轴方向滚动 */
  overflow-x: auto;
  /* 防止换行 */
  white-space: nowrap;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}
.item {
  display: inline-block;
  width: 35vw;
  height: 65vw;
  background-color: transparent;
  margin-right: 5vw;
}

.item-content {
  width: 100%;
  height: 30vw;
  border-radius: 2vw;
  background-color: #333;
  font-size: 4vw;
  color: #fff;
  padding:2vw 0 0 2vw;
  background-image: url('https://hbimg.b0.upaiyun.com/3d96df16380b293adb544442fe41d38db3d642da8e5d-TXPP1C_fw658');
  background-size: cover;
}
.bottom {
  margin-top: 5vw;
}

</style>